<template>
  <div class="member" v-if="$store.getters['user/isLogin']">
    <div class="header-con">
       <div class="user-info">
         <div class="avatar-con">
           <div class="avatar">
           <img src="../assets/head.jpg" class="image-info">
           </div>
         </div>
         <div class="person-con">
           <span>{{$store.state.user.username }}</span>
         </div>
       </div>
    </div>
    <ul class="mui-table-view">
          <li class="mui-table-view-cell mui-media">
              <router-link to="/user/dingdan" class="mui-navigate-right">
                 <div class="mui-media-body">
                   我的订单
                 </div>
              </router-link>
          </li>
      </ul>
  </div>

  <div class="member" v-else>
    <div class="header-con">
     <router-link to="/user/login" >
       <div class="user-info">
         <div class="avatar-con">
           <div class="avatar">
           <img src="../assets/head.jpg" class="image-info">
           </div>
         </div>
         <div class="person-con">
           <span>登录 / 注册</span>
         </div>
       </div>
     </router-link>
    </div>
    <ul class="mui-table-view">
          <li class="mui-table-view-cell mui-media">
              <router-link to="/user/dingdan" class="mui-navigate-right">
                 <div class="mui-media-body">
                   我的订单
                 </div>
              </router-link>
          </li>
      </ul>
  </div>
 </template>

 <style scoped>
   .member{
     margin-bottom: 15px;}
     .header-con{
       padding: 0px;
       background-color: #fff;}
       .user-info{
         position: relative;
         overflow: hidden;
         width: 100%;
         height: 120px;
         background: linear-gradient(90deg,#fd4170,#fa4846);
         box-shadow: 0 0.1rem 0.25rem #f8e3c6;}
         .avatar-con{
           position: absolute;
           left: 15px;
           top: 50%;
           transform: translateY(-50%);}
           .avatar{
             width: 60px;
             height: 60px;
             overflow: hidden;
             box-shadow: 0 2px 10px rgba(0,0,0,15);
             border: 1px solid hsla(0,0%,100%,.4);
             border-radius: 50%;}
             .image-info{
               width: 100%;
               height: 100%;
             }
         .person-con{
           position: absolute;
           left: 90px;
           top: 50px;
           transform: translateY(-50%);
           color: #fff;
         }
   .mui-table-view{
    margin-top: 2rem;
   }
   .mui-table-view .mui-media, .mui-table-view .mui-media-body{
     line-height: 20px;
     text-align:left;
     background: #fff;
   }
   </style>
